import React, { useState } from 'react';
import { Button, Input } from 'antd';
import './index.less';

const Index: React.FC<any> = (props) => {
  const { 
    confirmText, 
    onConfirm, 
    onCancel,
    placeholder,
    loading
  } = props;
  const [value, setValue] = useState<string>('');

  const onInputChange = (e: any) => {
    if (e.target.value) {
      setValue(e.target.value);
    }
  }
  return (
    <div className="pop-confirm-dialog">
      <Input 
        name="remark" 
        placeholder={placeholder || '请输入'} 
        className="remark-input" 
        onChange={onInputChange} />
      <div className="btns-wrap">
        <Button onClick={() => {
          onCancel?.();
        }} className="cancel-btn">再想想</Button>
        <Button loading={loading} type="primary" onClick={() => {
          onConfirm(value);
        }}>{confirmText || '审批通过'}</Button>
      </div>
    </div>
  );
};

export default Index;
